<template>
  <div style="width: 340px; height: 630px; margin: 10px; background-color: #efefef; position: fixed;">
    <div style="text-align: center; font-size: 22px; margin-top: 150px;">欢迎登录蜗牛生鲜</div>
    <div style="text-align: center; margin-top: 50px;">
      <input placeholder="输入手机号" type="text" v-model="phone" style="padding-left: 15px; width: 210px; height: 35px; border: 1px solid gray; border-radius: 8px;">
    </div>
    <div style="margin-top: 20px; text-align: center;">
      <button :enable="btnState"  @click="submitForm" style="background-color: cadetblue; border-radius: 5px; width: 60px; height: 30px; border: none; color: white; margin-right: 10px;">登录</button>
      <button @click="$router.push('phoneRegister')"  style="background-color: cadetblue;  border-radius: 5px; width: 60px; height: 30px; border: none; color: white;">注册</button>
    </div>
    <div style="text-align: center; margin-top: 260px;">
      <el-checkbox v-model="checked"><span>我已阅读并同意《服务条款》、《隐私政策》</span></el-checkbox>
      <!-- <input type="checkbox" @onchange="doChange"> <span style="color: #409EFF">我已阅读并同意《服务条款》、《隐私政策》</span> -->
    </div>
  </div>
</template>

<script>


export default {
  data(){
  return {
    btnState: false,
    phone:'',
    checked:true,
    
}
  },
  methods: {
        
      submitForm() {
        if(this.checked){
          this.$axios.get('api/app/user/usersLogin?phone='+this.phone)
        .then(res =>{
          console.log(res.data)
          sessionStorage.setItem("phone",this.phone)
           if(res.data.code==200){
            localStorage.setItem('jwt',res.data.data);
            this.$router.push('firstPage')
          }else{
            this.$message("登录失败！")
          }
        })
        } else{
          this.$message("请勾选同意协议")
        }
        
      },
      
      // doChange(){
      //     this.btnState = true;
      // }
    }
}
</script>

<style scoped> 

</style>